<template>
  <el-row>
    <el-form size="default" :inline="true">
      <el-form-item label="客户姓名">
        <el-input
          v-model="customerName"
          placeholder="请输入客户姓名"
          class="input-with-select"
          clearable
        >
          <template #append>
            <el-button icon="Search" align="center" @click="queryList" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="ShoppingCartFull"
          size="big"
          @click="setNurseService()"
          >购买护理服务</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>

  <!-- 分割线 -->
  <div>
    <el-divider> </el-divider>
  </div>

  <div class="common-layout">
    <el-container>
      <el-aside class="customerInfo">
        <CustomerInfo
          :customerName="customerName"
          ref="left"
          :handleRowClick="handleRowClick"
        />
      </el-aside>

      <div class="spacer"></div>

      <el-aside class="service">
        <ServiceInfo ref="right" />
      </el-aside>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomerInfo from "./CustomerInfo.vue";
import ServiceInfo from "./ServiceInfo.vue";
import { useRouter } from "vue-router"; // 导入 useRouter;
import { ElMessage } from "element-plus";

let left = ref(null);
let right = ref(null);

const router = useRouter(); // 获取 router 实例

const customerName = ref("");
const nurseCustomerName = ref("");
// const queryParams = ref({
//   customerName: "",
// });

let selectedCustomer = null;

function queryList() {
  // console.log("查询方法被调用了");
  // console.log(queryParams.value.customerName);
  left.value.customerList();
  // console.log("左侧被调用了");
  // right.value.queryList();
}

function handleRowClick(row) {
  console.log(row.customerName);

  selectedCustomer = row;
  // nurseCustomerName.value = name;
  // console.log("点击的用户数据：", nurseCustomerName.value);
  right.value.queryList(row.customerName);
}

// 购买护理服务，点击左侧表格数据handleRowClick后点再击购买护理服务跳转到 customerNurseService 页面
function setNurseService() {
  if (selectedCustomer) {
    // alert("selectedCustomer.customerId" + selectedCustomer.customerId);
    router.push({
      name: "customerNurseService",
      query: {
        customerId: selectedCustomer.customerId,
        customerName: selectedCustomer.customerName,
      },
    });
  } else {
    ElMessage({
      message: "请选中表格中的客户",
      type: "warning",
    });
  }
}
</script>

<style scoped>
.input-with-select .el-input-group__prepend {
  /* background-color: var(--el-fill-color-blank); */
}

/* .common-layout {
  margin-top: 20px;
} */

/* 护理项目信息 */
.customerInfo {
  width: 470px;
  height: 100%;
  border: 1px solid rgb(194, 194, 194);
  border-radius: 5px;
}

/* 已购护理服务 */
.service {
  width: 700px;
  height: 100%;
  border: 1px solid rgb(194, 194, 194);
  border-radius: 5px;
}

/* 间距 */
.spacer {
  width: 20px; /* 间距大小 */
}
</style>
